<template>
  <div class="mitt-demo-view">
    <h1>🚌 全局事件总线 mitt 演示</h1>
    <p>兄弟组件不通过父组件，直接用 mitt 通信！</p>

    <div class="demo-container">
      <MittBrotherA />
      <MittBrotherB />
    </div>
  </div>
</template>

<script setup>
import MittBrotherA from '@/components/MittBrotherA.vue'
import MittBrotherB from '@/components/MittBrotherB.vue'
</script>

<style scoped>
.mitt-demo-view {
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
}
.mitt-demo-view h1 {
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}
.mitt-demo-view p {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}
.demo-container {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
